<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>心</title>
		<style>
			div{
				width:200px;
				height:200px;
				background-color: #e4393c;
				/*外边距 自适应剧中  */
				margin:250px auto;
				transform: rotate(135deg);
				/* 透明度：属性值范围值0~1 */
				opacity: .7;
				/* 滤镜属性：下阴影  产生光晕效果
				       drop-shadow(X轴 Y轴 模糊范围 模糊颜色);
				 */
				filter: drop-shadow(0 0 20px #e4393c);
				/* 动画 复合属性 2.启动动画 */
				animation: heart .8s linear infinite;
				/*        关键帧名称 过渡时间 过渡方式 动画次数*/
			}
			/* 
			 *  CSS3基础语法：选择器：抓取页面上的元素添加效果
			 * ③伪类选择器：给元素添加附加效果
			 * 语法：选择器：hover  当鼠标悬停时给元素添加效果
			 *      选择器：before  在元素之前生成内容，通常与concent属性使用
			 *      选择器：after  在元素之后生成内容，通常与concent属性使用
			 */
			/* 需求：心【四方块】上方生成内容 */
			div:before{
				content:"";
				/* CSS属性：显示属性
				display:block;转换成块元素
				display:inline;转换成行元素
				display:none;元素消失
				 */
				display:block;
				/* 画圆 ：1.空间 2.边框/背景填充 3.倒角*/
				width:200px;
				height:200px;
				background-color: #e4393c;
				border-radius:50%;
				/* 相对定位 */
				position: relative;
				left:-100px;
			}
			div:after{
				content:"";
				display:block;
				width:200px;
				height:200px;
				background-color: #e4393c;
				border-radius:50%;
				position: relative;
				top:-100px;
				
				
			}
			/* 动画：1.创建关键帧 2.，找到添加动画元素，启动关键帧 */
			@keyframes heart {
				0%{
					/* 等比例 */
					/* 转换属性【复合属性】：旋转 缩放 平移 */
					transform: rotate(135deg) scale(1);
				}
				30%{
					/*scale(.8); 缩小 */
					transform: rotate(135deg) scale(.6);
				}
				100%{
					/*scale(1.2); 缩大 */
					transform:scale(1.2);
					transform: rotate(135deg);
				}
			}
				
		</style>
	</head>
	<body>
		<!-- 心 思路：设置一个div  产生两个圆：伪类选择器 
		     html    元素分类：所有元素明确元素
			         块元素：可以设置高宽，独占一行，典型：div
					 行元素：不可以设置高宽，在一行内显示，典型:span
					 *文本就是行元素
					 行内块元素：可以设置高宽，在一行内显示，典型:img
		
		-->
		<audio src="renxi.mp3" autoplay></audio>
		<div></div>
	</body>
</html>